<template>
  <div>
    <el-image
        v-if="editMode"
        :src="imageUrl"
        :style="{
                width:this.detail.style.position.w+'px',
                height:this.detail.style.position.h+'px'
            }" @dragstart.prevent @dragover.prevent @drop.prevent></el-image>
    <div v-else id="playWind"></div>
  </div>
</template>

<script>

import BaseView from './View';
import videoImage from '@/views/zutai/images/video.jpg'

export default {
  name: 'view-video',
  extends: BaseView,
  props: {},
  data() {
    return {
      imageUrl: videoImage,
    }
  },
  computed: {},
  mounted() {
    if (!this.editMode) {
      this.getBDeviceVideo(this.detail.videoUrl);
    }
  },
  methods: {
    getBDeviceVideo(id) {
      if (!id) {
        return false
      }
      let url = "/zutai/bDeviceVideo/" + id
      request({
        url: url,
        method: "get",
      }).then((res) => {
        let url = 'ezopen://open.ys7.com/' + res.serialNumber + "/" + res.channelNumber + ".live"
        this.initVideo(url, this.detail.style.position.w - 15, this.detail.style.position.h - 15, res.accessToken);
      })
    },
    initToken() {
      let param = {
        appKey: 'fc3ae70b344445db992f0cb9c8fb41d8',
        appSecret: 'a34cd9d8cb2ae65642349b77c2b391e2'
      }
      request({
        url: "https://open.ys7.com/api/lapp/token/get?appKey=fc3ae70b344445db992f0cb9c8fb41d8&appSecret=a34cd9d8cb2ae65642349b77c2b391e2",
        method: "post",
        Header: {"Access-Control-Allow-Origin": "https://open.ys7.com"}
      }).then((res) => {
        console.log('获取token成功!', res);
      }).catch((error) => {
        console.log(error)
      })
    },
    initVideo(url, width, height, accessToken) {
      var EZOPENDemo;
      window.EZOPENDemo = EZOPENDemo;
      var width = width;
      var height = height;
      const ezopenInit = () => {
        EZOPENDemo = new EZUIKit.EZUIKitPlayer({
          id: 'playWind',
          width: width,
          height: height,
          template: "pcLive",
          url: url,
          accessToken: accessToken
        });
      }
      ezopenInit();
    },
  }
}
</script>

<style lang="scss">
.view-video {
  height: 100%;
  width: 100%;
}
</style>
